import { useState } from 'react'

const Control = ({ value, text, onIncr, onDecr }) => (
  <div
    className="d-flex justify-content-between item-align-center"
    style={{ width: 200 }}
  >
    <button style={{ height: '2em' }} onClick={onDecr}>
      -
    </button>
    <div>
      <h3>{value}</h3>
      <div>{text}</div>
    </div>
    <button style={{ height: '2em' }} onClick={onIncr}>
      +
    </button>
  </div>
)

// eslint-disable-next-line no-unused-vars
const AudioControls = () => {
  let [volume, setVolume] = useState(0)
  let [treble, setTreble] = useState(0)
  let [mid, setMid] = useState(0)
  let [bass, setBass] = useState(0)
  return (
    <>
      <Control
        text="音量"
        value={volume}
        onIncr={() => setVolume(volume + 1)}
        onDecr={() => setVolume(volume - 1)}
      />
      <Control
        text="高音"
        value={treble}
        onIncr={() => setTreble(treble + 1)}
        onDecr={() => setTreble(treble - 1)}
      />
      <Control
        text="中音"
        value={mid}
        onIncr={() => setMid(mid + 1)}
        onDecr={() => setMid(mid - 1)}
      />
      <Control
        text="低音"
        value={bass}
        onIncr={() => setBass(bass + 1)}
        onDecr={() => setBass(bass - 1)}
      />
    </>
  )
}

const AudioControls2 = () => {
  const names = {
    volume: '音量',
    treble: '高音',
    mid: '中音',
    bass: '低音',
  }
  const [audio, setAudio] = useState({
    volume: 0,
    bass: 0,
    mid: 0,
    treble: 0,
  })
  return (
    <>
      {Object.keys(names).map((key) => (
        <Control
          key={key}
          text={names[key]}
          value={audio[key]}
          onIncr={() => setAudio({ ...audio, [key]: audio[key] + 1 })}
          onDecr={() => setAudio({ ...audio, [key]: audio[key] - 1 })}
        />
      ))}
    </>
  )
}

export default AudioControls2
